<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>

<body>
    <!-- 需要设置请求地址和提交方式 -->
    <form>
        <table align="center">
            <caption>
                <h2>注册</h2>
            </caption>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repass"></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="reset">
                    <input type="submit">
                </td>
            </tr>
        </table>
    </form>
    <div class="container footer">
        <div class="content">
            已有账号，去<a href="login.html">登录</a>
        </div>
    </div>
</body>
<!-- 表单提交之前，应该对表单数据做验证 -->
<!-- <script src="./js/register.js"></script> -->
<!-- 封装的ajax -->
<script src="./js/requset.js"></script>
<script>
    var form = document.querySelector('form')
    form.onsubmit = function (event) {
        event.preventDefault()
        var username = document.querySelector('[name="username"]').value
        var password = document.querySelector('[name="password"]').value
        var repass = document.querySelector('[name="repass"]').value
        var email = document.querySelector('[name="email"]').value
        var usernameReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
        if (!usernameReg.test(username)) {
            alert('用户名不符合规则')
            return false
        }
        var passwordReg = /^.{6,10}$/
        if (!passwordReg.test(password)) {
            alert('密码不符合规则')
            return false
        }
        if (password != repass) {
            alert('两次密码输入不一致')
            return false
        }
        var emailReg = /(^[1-9]\d{5,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)/
        if (!emailReg.test(email)) {
            alert('邮箱不符合规则')
            return false
        }
        // console.log(username, password, repass, email);
        request({
            method: 'post',
            url: '/user/register',
            data: {
                username: username,
                password: password,
                email: email
            }
        }).then((res) => {
            console.log(res);
            //注册成功后跳转到登录
            if(res.error_code === 0){
                location.href = '/login.html'
            }else if(res.error_code === 2){
                alert(res.msg)
            }else if(res.error_code === 3){
                alert(res.msg)
            }
        }).catch(() => {
            new Error('错误')
        });
        // 阻止默认行为，不允许表单跳转
        // return false
    }
</script>

</html>